<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>api-struct</title>
	<link rel="shortcut icon" href="./image/favicon.png">
	<link rel="stylesheet" href="global.css">
	<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/gruvbox-dark.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
	<script src="https://cdn.bootcss.com/viz.js/1.8.0/viz-lite.js"></script>
	<script src="../dist/directive.bundle.js"></script>
	<script src="../dist/layout.bundle.js"></script>
	<script src="../dist/component.bundle.js"></script>
	<script>
		markdown.extend('roundimage',function(code){
			return '<div \
				style="display:inline-block;width:200px;height:200px;margin:10px;background-image:url('+code+');background-size:cover;background-position:center center;border-radius:50%;">\
			</div>'
		})

		Vue.component('radiusimage',{
			template:'<img :src="src" :style="sty" />',
			props:{
				src:{
					type:String,
					default:''
				},
				radius:{
					type:Number,
					default:0
				}
			},
			data:function(){
				return {
					sty:{
						borderRadius:this.radius+'px',
					}
				}
			}
		})
	</script>
	<style>
	.bilibili{
		transition:all 1s ease-in-out;
		max-width:700px;
	}
	.bilibili:hover{
		transform:scale(0.9,0.9);
	}  
	</style>
</head>
<body>
	<div id="app">
		<struct>
			<!--头部-->
			<struct-header slot="header" :css="{backgroundColor:'#ffffff'}">
				<!--logo-->
				<div style="float:left;margin-left:30px;">
					<img src="./image/api.png" slot="logo" alt="">
				</div>
				<!--<div style="font-size:30px;float:left;margin-top:27px;color:#aaa;">
					-
					<b style="color:#088bc3;">
					struct
					</b>
				</div>-->		
				
				
				<!--顶部链接-->
				<div style="float:right;padding-right:100px;line-height:72px;">
					<struct-nav slot="nav" :links="nav">
					</struct-nav>
					&nbsp;
					<a href="https://github.com/Zhang-Zhen-Yang/api-editor" target="_blank">
						<svg style="vertical-align:-5px;" aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
					</a>
				</div>
							
			</struct-header>

			<!--边栏-->
			<struct-aside 
				slot="aside" 
				:dev="true"
				:links="aside" 
				:init-active="[0,0]" 
				:expandable="true" 
				:css="{'position':'fixed','left':'0','top':'72px','width':'300px','padding':'20px 20px 0 30px','overflow':'auto','height':'calc(100% - 72px)'}">
				
				<!--<img src="https://gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" slot="content" alt="" style="width:80%;display:block;">-->
			</struct-aside>	
			
			<!--内容区-->
			<!--<iframe src="" slot="article" name="remote" frameborder="0" style="position:fixed;width:100%;height:calc(100% - 72px);" ></iframe>-->
			<struct-remote slot="article" :init="'./docs/introduction.md.html'" >
				<div style="margin-bottom:20px;">
					<img src="./image/api.png" alt="" style="vertical-align:-15px;">
					<span style="font-size:16px">
						Copyright © 2017 <a href="javascript:void(0)" style="color:#088bc3;text-decoration:none;"> www.xxx.net</a> All Rights Reserved
					</span>					
				</div>
			</struct-remote>
			
			<!--回到顶部-->
			<struct-scrolltop slot="scrolltop" :target="'remote'">			
			</struct-scrolltop>
		</struct>
		<v-snackbar ref="snackbar"></v-snackbar>
	</div>

	<script>

		var app = new Vue({
			el: '#app',
			data: {
				aside:[
					//{name:'手册',url:'./docs/md3.md',target:'remote'},
					{name:'简介',url:'./docs/introduction.md.html',target:'remote'},
					{name:'api-struct',target:'remote',expanded:true,children:[
						/*{name:'header',url:'./docs/header.md.html'},
						{name:'nav',url:'./docs/nav.md.html'},*/
						{name:'aside',url:'./docs/aside.md.html'},
						{name:'remote',url:'./docs/remote.md.html'}
					]},
					{name:'component',expanded:true,target:'remote',children:[
						{name:'markdown',url:'./docs/markdown.html'},
						{name:'row',url:'./docs/row.md.html'},
						{name:'code',url:'./docs/code.md.html'},
						{name:'clipboard',url:'./docs/clipboard.md.html'},
						{name:'center',url:'./docs/center.md.html'},
						{name:'aspect',url:'./docs/aspect.md.html'},
						{name:'qrcode',url:'./docs/qrcode.html'},
						{name:'canvas',url:'./docs/canvas.html'},
						{name:'resize',url:'./docs/resize.html'},
						{name:'draggable',url:'./docs/draggable.html'},
						{name:'resizable',url:'./docs/resizable.html'},
						//{name:'tabs',url:'./docs/tabs.html'},
					]},
					{
						name:'directive',expanded:true,target:'remote',children:[
							{name:'column',url:'./docs/column.md.html'},
						]
					},
					{
						name:'markdown扩展',expanded:true,target:'remote',children:[
							{
								name:'width',
								url:'./docs/markdown-width.html'
							},
							{
								name:'css',
								url:'./docs/markdown-css.html'
							},
							{
								name:'attr',
								url:'./docs/markdown-attr.html'
							},
							{
								name:'tip',
								url:'./docs/markdown-tip.html'
							},
							/*{
								name:'var',
								url:'./docs/markdown-var.html'
							},
							{
								name:'each',
								url:'./docs/markdown-each.html'
							},*/
							{
								name:'vertical',
								url:'./docs/markdown-vertical.md.html'
							},
							{
								name:'stepper',
								url:'./docs/markdown-stepper.html'
							}
						]
					},
					{
						name:'扩展教程',expanded:true,target:'remote',children:[
							{
								name:'自定义组件扩展',
								url:'./docs/demo-component.md.html'
							},
							{
								name:'markdown扩展',
								url:'./docs/demo-markdown.md.html'
							},
						]
					},
				],
				nav:[
					{name:'教程',url:'./index.html',target:'_self'},
					{name:'手册',url:'https://www.bilibili.com/',target:'_blank'},
					{name:'Graphviz',url:'./api-struct-graphviz.html',target:'_self'},
					{name:'下载',url:'./download/dist.zip',target:'_blank'},
				]
			},
			methods:{
				aa:function(e){
					alert(e);
				},
				show:function(text,timeout){
					app.snackbar.show(text,timeout);
				}
			},
			mounted:function(){
				this.snackbar = this.$refs.snackbar;
			}
		})		
	</script>
</body>
</html>